<template>
  <div class="dashboard-container ">
    <div class="homeBody">
      <div class="panel-group">
        <el-row :gutter="40">
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="rightRound"></div>
              <div class="rightRound2"></div>
              <div class="card-panel-icon-wrapper icon-people">
                <!--<svg-icon icon-class="peoples" class-name="card-panel-icon" />-->
                <div class="haveInHand"></div>
              </div>
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="orderStatistics.haveInHand" :duration="2600" class="card-panel-num" />
                <div class="card-panel-text">
                  进行中订单 
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="rightRound"></div>
              <div class="rightRound2"></div>
              <div class="card-panel-icon-wrapper icon-message">
               <!-- <svg-icon icon-class="message" class-name="card-panel-icon" />-->
                <div class="tobeReleased"></div>
              </div>
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="orderStatistics.beReleased" :duration="3000" class="card-panel-num" />
                <div class="card-panel-text">
                  待发布订单
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="rightRound"></div>
              <div class="rightRound2"></div>
              <div class="card-panel-icon-wrapper icon-money">
                <!--<svg-icon icon-class="money" class-name="card-panel-icon" />-->
                <div class="completed"></div>
              </div>
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="orderStatistics.completed" :duration="3200" class="card-panel-num" />
                <div class="card-panel-text">
                  已完成订单
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <div class="card-panel">
              <div class="rightRound"></div>
              <div class="rightRound2"></div>
              <div class="card-panel-icon-wrapper icon-shopping">
                <!--<svg-icon icon-class="shopping" class-name="card-panel-icon" />-->
                <div class="userNumber"></div>
              </div>
              <div class="card-panel-description">
                <count-to :start-val="0" :end-val="orderStatistics.userNumber" :duration="3600" class="card-panel-num" />
                <div class="card-panel-text">
                  用户数量
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--中间图表-->
      <div class="homeBetten" >
        <header class="theheader">*支出统计*</header>
        <el-date-picker
          v-model="homeTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="gettwoList"
          :clearable="false"
        />
      <!--  <el-button type="primary" icon="el-icon-search" @click="gettwoList">查询</el-button>-->
        <el-button type="primary" @click="resetTwo">重置</el-button>
      <!--  <el-radio-group v-model="humiditymsg" style="margin-left: 50px;width: 100%" @change="gettwoList">
          <el-radio :label="2">周</el-radio>
          <el-radio :label="1">月</el-radio>
          <el-radio :label="3">年</el-radio>
        </el-radio-group>-->
        <div class="homeBettenLeft">
          <div id="pieChart" style="width: 100%;height: 90%;" />
        </div>
        <div class="homeBettenRight">
          <div id="lineChart" style="height: 90%;width:100%;" />
        </div>

      </div>
      <!--底部表格-->
      <div class="homeTable">
        <header class="theheader">*明星榜*</header>
        <!--<el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
          <el-form-item label="完成数量">
            <el-input v-model="searchForm.number" placeholder="请输入完成数量" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form-item>
        </el-form>-->
        <div class="table_box" id="table_box">
          <el-table
            :data="tableList"
            :height="tableHeight"
          >
            <el-table-column label="名称" align="center"  show-overflow-tooltip>
              <template slot-scope="scope">
                <div v-if="scope.$index==0" class="firstIcon" ></div>
                <div v-if="scope.$index==1"  class="secondIcon" ></div>
                <div v-if="scope.$index==2" class="thirdIcon" ></div>
                {{ scope.row.name }}
              </template>
            </el-table-column>
             <el-table-column label="完成数量" align="center" property="orderCount" show-overflow-tooltip>
              <template slot-scope="scope">
                    <span v-if="scope.row.orderCount">{{scope.row.orderCount}}</span>
                    <span v-else >0</span>          
              </template>
            </el-table-column>
            <el-table-column label="完成率" align="center" show-overflow-tooltip >
              <template slot-scope="{row}">
                <span>{{jiedanlv(row.wcOrderCount,row.jdOrderCount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="接单数量" align="center" property="jdOrderCount" show-overflow-tooltip>
              <template slot-scope="scope">
                    <span v-if="scope.row.jdOrderCount">{{scope.row.jdOrderCount}}</span>
                    <span v-else >0</span>          
              </template>
            </el-table-column>
            <el-table-column label="接单率" align="center"  show-overflow-tooltip >
              <template slot-scope="{row}">
                <span>{{jiedanlv(row.jdOrderCount,row.jjOrderCount)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="一次审核通过率" align="center" property="onePassOrderCount" show-overflow-tooltip />
            <el-table-column label="累计收入" align="center" property="sumCommission" show-overflow-tooltip />
            <el-table-column label="工种" align="center" property="jobName" show-overflow-tooltip />
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import echarts from 'echarts'
import  {homePageOrder,homePageTwo,homePageThree} from '@/api/article'
export default {
  name: 'Dashboard',
  components: { CountTo },
  data() {
    return {
      /** **********第一块统计**********/
      orderStatistics:{
        haveInHand:0,//进行中
        beReleased:0,//待发布
        completed:0,//已完成
        userNumber:0//用户数量
      },
      /** **********订单统计结束**********/
      /** **********图表**********/
     /* humiditymsg: 2, // 2-周,1-月年*/
      homeTime:[],//时间段
      datasetsource: [
        ['周末', 2839],
        ['周一', 28494],
        ['周二', 1393],
        ['周三', 28943],
        ['周四', 4643],
        ['周五', 2345],
        ['周六', 4566]
      ], // 折线图表数据数组
      pieData:{
        unspent:0,//未支出
        alread:0,//已支出
        total:0//共计
      },//饼图
      /** **********图表结束**********/
      /** **********查询**********/
      searchForm: {
        number: '' // 数量
      },
      /** **********查询结束**********/
      /** **********table**********/
      labelPosition: 'right',
      tableList: [
        { title: '张三' },
        { title: '李四' },
        { title: '王五' },
        { title: '刘柳' },
        { title: '1111' },
        { title: '3333' },
        { title: '44' }
      ], // 页面table数据
      listLoading: true, // 加载
     tableHeight: window.screen.availHeight - 790, // table高度
      /** **********table结束**********/
    }
  },
  mounted() {
        this.getoneList()
        this.gettwoList()
        this.getthreeList()
   
  },
  methods: {
    //接单率计算
    jiedanlv(all,cnot){
      let theall,thecnot
      if(all == null || all == ""){
        theall=0
      }else {
        theall=all
      }
      if(cnot == null||cnot == ""){
        thecnot=0
      }else {
        thecnot = all
      }
      if(theall == 0){
        return "未有记录"
      }
      return theall/(theall + thecnot) + "%"
    },
    //首页第一块
    getoneList() {
      this.orderStatistics={
        haveInHand:0,//进行中
        beReleased:0,//待发布
        completed:0,//已完成
        userNumber:0//用户数量
      },
        homePageOrder({}).then(res=>{
          this.orderStatistics={
          haveInHand:res.data[2]==null?0:res.data[2],//进行中
          beReleased:res.data[1]==null?0:res.data[1],//待发布
          completed:res.data[8]==null?0:res.data[8],//已完成
          userNumber:res.data[11]==null?0:res.data[11]//用户数量
        }
      })
    },
    //首页第二块
    gettwoList(){
      this.pieData={
        unspent:0,
        alread:0,
        total:0
      }
      this.datasetsource=[]
      homePageTwo({
        beginTime:this.homeTime[0],
        endTime:this.homeTime[1],
      }).then(res=>{
        if(res.code==1){
        /*折线图*/
          if(res.data.line.length){
             let data=[]
            for(let i=0;i<res.data.line.length;i++){
              data.push([
                res.data.line[i].day,(res.data.line[i].unspent+res.data.line[i].alread)
              ])
            }
            this.datasetsource=data
            this.initLine()
           }
        //  饼图
          this.pieData={
            unspent:res.data.pie.unspent,
            alread:res.data.pie.alread,
            total:res.data.pie.total
          }
          this.initPie()
        }
      })
    },
    /*首页第二块重置*/
    resetTwo(){
      this.homeTime=[]
      this.gettwoList()
    },
    getthreeList(){
      this.tableList=[]
      homePageThree({
      }).then(res=>{
        if(res.code==1){
        this.tableList=res.data
      }
     })
    },
    /** *************图表*******************/
    // 饼图
    initPie() {
      var pieData=[]
      pieData=[this.pieData.alread,this.pieData.unspent]
      // 数字隔三位,隔开
      var strNum = this.pieData.total
      var str = null
      if (strNum.length <= 3) {
        str = strNum
      }
      if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
        str = strNum
      }
      var a = RegExp.$1; var b = RegExp.$2; var c = RegExp.$3
      var re = new RegExp()
      re.compile('(\\d)(\\d{3})(,|$)')
      while (re.test(b)) {
        b = b.replace(re, '$1,$2$3')
      }
      str = a + '' + b + '' + c
      // 数字隔三位,隔开
      var pieChart = echarts.init(document.getElementById('pieChart'))
      var pieChartOption = {
        title: {
          show: 'true',
          text: '共计\n' + str,
          top: '31%',
          x: '50%',
          textStyle: {
            fontSize: '35',
            color: '#1F88F1'
          },
          textAlign: 'center',
          formatter: function() {
            if (strNum.length <= 3) {
              return strNum
            }
            if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(strNum)) {
              return strNum
            }
            var a = RegExp.$1; var b = RegExp.$2; var c = RegExp.$3
            var re = new RegExp()
            re.compile('(\\d)(\\d{3})(,|$)')
            while (re.test(b)) {
              b = b.replace(re, '$1,$2$3')
            }
            return a + '' + b + '' + c
          }
        },
        legend: {
          orient: 'vertical',
          show: true,
          icon: 'circle',
          itemGap: 12,
          bottom: '8%',
          textStyle: {
            fontSize: '15'
          },
          data: ['已支出', '未支出'],
          formatter: function(name) {
            var index = 0
            const arrayData = []
            var clientlabels = ['已支出', '未支出']
            var clientcounts = pieData
            clientcounts.forEach(function(value, i) {
              if (value.length <= 3) {
                arrayData.push(value)
              }
              if (!/^(\+|-)?(\d+)(\.\d+)?$/.test(value)) {
                arrayData.push(value)
              }
              var a = RegExp.$1; var b = RegExp.$2; var c = RegExp.$3
              var re = new RegExp()
              re.compile('(\\d)(\\d{3})(,|$)')
              while (re.test(b)) {
                b = b.replace(re, '$1,$2$3')
              }
              arrayData.push(a + '' + b + '' + c)
            })
            clientlabels.forEach(function(value, i) {
              if (value === name) {
                index = i
              }
            })

            return name + '  ' + arrayData[index]
          }
        },
        series: [{
          name: 'Line 1',
          type: 'pie',
          clockWise: true,
          center: ['50%', '40%'],
          radius: ['50%', '66%'],
          itemStyle: {
            normal: {
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            }
          },
          hoverAnimation: false,
          data: [{
            value:pieData[0],
            name: '已支出',
            itemStyle: {
              normal: {
                color: { // 完成的圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#00cefc' // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#367bec' // 100% 处的颜色
                  }]
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            }
          }, {
            name: '未支出',
            value: pieData[1],
            itemStyle: {
              color: 'rgba(176, 212, 251, 1)'
            }
          }]
        }]
      }
      pieChart.setOption(pieChartOption)
      pieChart.resize()
    },
    // 折线
    initLine() {
      const lineChart = echarts.init(document.getElementById('lineChart'))
      const lineChartOption = {
        legend: {
        },
        grid: {
          left: '9%',
          top: '5%',
          bottom: '25%',
          right: '5%'
        },
        color: ['#00cccc'],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        dataset: {
          dimensions: ['product', ''],
          source: this.datasetsource
        },
        xAxis: [{
          type: 'category'

        }],
        yAxis: [{
          type: 'value'
        }],
        series: [
          // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。x轴-source，legend.data-dataArray
          { type: 'line' }
        ]
      }
      lineChart.setOption(lineChartOption)
      lineChart.resize()
    },
  }
}
</script>
<style lang="scss" scoped>
  .homeBody{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*顶部*/
    .panel-group {
      height:120px;
      .card-panel-col {
        margin-bottom: 32px;
        flex: 1;
        &:nth-child(1) .card-panel{
          background:linear-gradient(270deg,rgba(31,136,241,1),rgba(61,183,246,1));
        }
        &:nth-child(2) .card-panel{
          background:linear-gradient(270deg,rgba(248,117,77,1),rgba(248,205,86,1));
        }
        &:nth-child(3) .card-panel{
          background:linear-gradient(270deg,rgba(111,100,197,1),rgba(178,127,212,1));
        }
        &:nth-child(4) .card-panel{
          background:linear-gradient(270deg,rgba(250,114,15,1),rgba(255,171,110,1));
        }
        &:nth-child(1) .card-panel .rightRound,&:nth-child(1) .card-panel .rightRound2{
          background:linear-gradient(270deg,rgba(61,183,246,1),rgba(31,136,241,1));
        }
        &:nth-child(2) .card-panel .rightRound,&:nth-child(2) .card-panel .rightRound2{
          background:linear-gradient(270deg,rgba(248,117,77,1),rgba(248,205,86,1));
        }
        &:nth-child(3) .card-panel .rightRound,&:nth-child(3) .card-panel .rightRound2{
          background:linear-gradient(270deg,rgba(111,100,197,1),rgba(178,127,212,1));
        }
        &:nth-child(4) .card-panel .rightRound,&:nth-child(4) .card-panel .rightRound2{
          background:linear-gradient(270deg,rgba(250,114,15,1),rgba(255,171,110,1));
        }
      }

      .card-panel {
        display: flex;
        padding: 0px 14%;
        height: 108px;
        cursor: pointer;
        font-size: 12px;
        position: relative;
        overflow: hidden;
        color: #666;
        background: #fff;
        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
        border-color: rgba(0, 0, 0, .05);
        /*定位*/
        .rightRound{
          position: absolute;
          top: -90%;
          right: 10%;
          width: 130px;
          height: 130px;
          opacity:0.5;
          border-radius:50%;
        }
        .rightRound2{
          position: absolute;
          top: -63%;
          right: -14%;
          width: 145px;
          height: 145px;
          opacity:0.5;
          border-radius:50%;
        }
        &:hover {
          .card-panel-icon-wrapper {
            color: #fff;
          }

         /* .icon-people {
            background: #40c9c6;
          }

          .icon-message {
            background: #36a3f7;
          }

          .icon-money {
            background: #f4516c;
          }

          .icon-shopping {
            background: rgba(111,100,197,1);
          }*/
        }
/*进行中订单图标*/
        .icon-people {
          color: #40c9c6;
          .haveInHand{
            width: 54px;
            height: 54px;
            background: url("./image/haveInHandIcon.png")no-repeat;
            background-size: 100% 100%;
          }
        }
/*待发布订单*/
        .icon-message {
          color: #36a3f7;
          .tobeReleased{
            width: 54px;
            height: 54px;
            background: url("./image/tobeReleasedIcon.png")no-repeat;
            background-size: 100% 100%;
          }
        }
/*已完成订单*/
        .icon-money {
          color: #f4516c;
          .completed{
            width: 54px;
            height: 54px;
            background: url("./image/completedIcon.png")no-repeat;
            background-size: 100% 100%;
          }
        }
/*用户数量*/
        .icon-shopping {
          color: #34bfa3;
          .userNumber{
            width: 54px;
            height: 54px;
            background: url("./image/userNumberIcon.png")no-repeat;
            background-size: 100% 100%;
          }
        }

        .card-panel-icon-wrapper {
          width: 27%;
          margin: 3% 0 0 3%;
          padding: 16px;
          transition: all 0.38s ease-out;
          border-radius: 6px;
        }

        .card-panel-icon {
          float: left;
          font-size: 48px;
        }

        .card-panel-description {
          width: 70%;
          text-align: center;
          font-weight: bold;
          margin:9.5% 9% 9% 9%;

          .card-panel-text {
            line-height: 18px;
            color: #fff;
            font-size: 16px;
            margin-top: 12px;
          }

          .card-panel-num {
            font-size: 20px;
            color: #fff;
          }
        }
      }
    }
    @media (max-width:550px) {
      .card-panel-description {
        display: none;
      }

      .card-panel-icon-wrapper {
        float: none !important;
        width: 100%;
        height: 100%;
        margin: 0 !important;

        .svg-icon {
          display: block;
          margin: 14px auto !important;
          float: none !important;
        }
      }
    }
    /*中间*/
    .homeBetten{
      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
      height:350px;
      margin-bottom: 10px;
      .homeBettenLeft{
        display: inline-block;
        float: left;
        width: 28%;
        height: 100%;
      }
      .homeBettenRight{
        display: inline-block;
        float: left;
        width: 72%;
        height: 100%;
      }
    }
    /*底部*/
    .homeTable{
      box-shadow: 0 1px 3px 0 rgba(0,0,0,0.5), 0 0 3px 0 rgba(0,0,0,0.3);
      height: 38%;
      /****table***/
      #table_box {
        height: 65%;
        .firstIcon{
          width: 14px;height: 14px;background: url('./image/firstIcon.png')no-repeat;display: inline-block;
        }
        .secondIcon{
          width: 14px;height: 14px;background: url('./image/secondIcon.png')no-repeat;display: inline-block;
        }
        .thirdIcon{
          width: 14px;height: 14px;background: url('./image/thirdIcon.png')no-repeat;display: inline-block;
        }
      }
    }
  }
  /*header*/
  .theheader{
   line-height: 40px;
    margin-left: 20px;
    width: 100%;
    height: 40px;
    font-weight: bold;
    font-size: 16px;
    font-family: 萍方-简;
    color:#000;
  }
</style>
